////////////////////////////////////////////////////////////////////////////
//
// Copyright 2018 Realm Inc.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////

@import "~realm-studio-styles/variables";
@import "./variables";

.RealmBrowser {
  display: flex;
  height: 100%;

  &__Table__HeaderGrid,
  &__Topbar {
    z-index: 1; // Overlay when drag-reordering elements in lists
  }

  &__Wrapper {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    overflow: hidden;
  }

  &__SelectObject {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 300px;
    padding: 0;
  }

  &__Content {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;

    &--error {
      align-items: center;
      justify-content: center;
    }
  }

  &__Topbar {
    align-items: center;
    background: $window-background;
    display: flex;
    padding: $spacer / 2;

    &__Changes {
      align-items: center;
      display: flex;
      margin-right: $spacer / 2;
    }

    &__Filter {
      flex-grow: 1;
      min-width: 100px;
    }

    &__Button {
      margin-left: $spacer / 2;
    }
  }

  &__TableContainer {
    display: flex;
    flex: 1 0 0;
  }

  &__Table {
    background: $white;
    flex: 1 0 0;
    position: relative;

    &__HeaderGrid {
      background: $white;
    }

    &__AddColumnControl {
      align-items: center;
      display: flex;
      height: $realm-browser-header-height;
      justify-content: flex-start;
      padding: $spacer;
      position: absolute;
      right: 0;
      top: 0;
      transition: opacity $fast, margin-left $fast;
      z-index: 1;

      &--hidden {
        margin-left: $spacer;
        opacity: 0;
        pointer-events: none;
      }
    }

    &__Row {
      position: relative;
      transition: background-color 200ms;

      &--striped {
        background: $row-stripe;
      }

      &--sorting {
        background: mix($row-stripe, $white, 40%);
        border-top: 1px solid $dove;
        margin-top: -1px;
        transition: transform 300ms;
        user-select: none;
      }

      &--highlighted,
      &--sorting-selected {
        background: $highlight-row-bg;
        color: $highlight-row-color;
      }

      &--sorting-selected {
        box-shadow: 0 0 10px $highlight-row-bg;
      }

      &--right-padded {
        margin-right: $spacer;
      }
    }

    &__HeaderCell,
    &__Cell {
      border-bottom: 1px solid $cell-border-color;
      border-right: 1px solid $cell-border-color;
      padding: 0;
      position: relative;

      // We need to do this, because reactstrap adds the form-control class
      // after the classNames that we provide.
      .form-control { // sass-lint:disable-line class-name-format
        background: transparent;
      }
    }

    &__HeaderCell {
      align-items: center;
      border-top: $cell-header-border-size solid transparent;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: $cell-padding-y $cell-padding-x;

      &--sortable {
        cursor: pointer;
      }

      &--sorting {
        border-top: $cell-header-border-size solid $primary;
      }
    }

    &__HeaderProperty {
      display: flex;
      flex-direction: column;
      justify-content: center;
      line-height: 1.2rem;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &__HeaderName {
      font-size: $font-size-sm;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &--primitive {
        &::before {
          color: $elephant;
          content: "primitive";
        }
      }
    }

    &__HeaderType {
      color: $primary;
      font-size: $font-size-sm;
      font-weight: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &__HeaderSort {
      color: $elephant;
      flex-shrink: 0;
      font-size: 12px;

      &--active {
        color: $charcoal;
      }
    }

    &__HeaderHandle {
      cursor: ew-resize;
      height: 100%;
      position: absolute;
      right: -$realm-browser-header-handle-width / 2;
      top: 0;
      width: $realm-browser-header-handle-width;
      z-index: 1;

      &--dragging {
        background: $realm-browser-header-handle-dragging-bg;
      }

      &:not(&--dragging) {
        &:hover {
          background: $realm-browser-header-handle-hover-bg;
        }
      }
    }

    &__Cell {
      font-size: $font-size-sm;
      line-height: 1rem;
      overflow: hidden;
      // The next line ensures that cells don't respond to clicks before their row is highlighted
      pointer-events: none;
      user-select: none;
      white-space: nowrap;

      &--highlighted {
        // Once the cell's row is highlighted, allow pointer events
        pointer-events: all;
      }
    }

    &__ListCell,
    &__ObjectCell,
    &__StringCell,
    &__DataCell,
    &__ListIndexCell {
      border: 1px solid transparent;
      box-shadow: border-box;
      height: 100%;
      overflow: hidden;
      padding: $cell-padding-y $cell-padding-x;
      width: 100%;

      &:focus {
        border: 1px solid $primary;
        outline: none;
      }
    }

    &__ListCell,
    &__ObjectCell {
      // Make these look like clickable elements
      color: $primary;
      cursor: pointer;
    }

    &__ObjectCell,
    &__StringCell,
    &__DataCell {
      &--null {
        color: $elephant;
        cursor: inherit;
        display: block;
        font-style: italic;
      }
    }

    &__StringCell {
      background: transparent;
      border-radius: 0;
      color: inherit;
      height: 100%;
      line-height: 1rem;
      padding: $cell-padding-y $cell-padding-x;

      &--null {
        color: $elephant;
      }

      &--disabled {
        color: $elephant;
      }

      &--int {
        text-align: right;
      }

      &:focus {
        box-shadow: none;
        color: inherit;
      }

      &:invalid &:focus {
        border: 1px solid $danger;
      }
    }

    &__ListCell {
      display: flex;

      &:hover {
        text-decoration: underline;
      }

      &__Value {
        flex: 1 1 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &__Count {
        flex: 0 0 0;
        margin-left: $spacer / 4;
        white-space: nowrap;
      }
    }

    &__Content {
      // This is needed to contain the MoreIndicators
      position: relative;
    }

    &__More {
      opacity: 0;
      pointer-events: none;
      position: absolute;
      transition: opacity .2s;
      z-index: 4;

      &--visible {
        opacity: 1;
      }

      &--top,
      &--bottom {
        height: $realm-browser-more-indicator-size;
        width: 100%;
      }

      &--left,
      &--right {
        height: 100%;
        width: $realm-browser-more-indicator-size;
      }

      &--top {
        background: linear-gradient(
          to bottom,
          $realm-browser-more-indicator-dark-color,
          $realm-browser-more-indicator-light-color
        );
        top: $realm-browser-header-height;
      }

      &--bottom {
        background: linear-gradient(
          to top,
          $realm-browser-more-indicator-dark-color,
          $realm-browser-more-indicator-light-color
        );
        bottom: 0;
      }

      &--left {
        background: linear-gradient(
          to right,
          $realm-browser-more-indicator-dark-color,
          $realm-browser-more-indicator-light-color
        );
        left: 0;
      }

      &--right {
        background: linear-gradient(
          to left,
          $realm-browser-more-indicator-dark-color,
          $realm-browser-more-indicator-light-color
        );
        right: 0;
      }
    }

    @import "../reusable/ReactVirtualized";
  }

  &__NoFocusPlaceholder {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;

    &::before {
      color: $elephant;
      content: "No schema selected";
    }
  }

  &__PermissionSidebar {
    border-top: 1px solid $dove;
  }

  &__Bottombar {
    align-items: center;
    background: $ultramarine;
    color: $dove;
    display: flex;
    height: 0;
    justify-content: space-between;
    transition: height 100ms;

    &--visible {
      height: 2.8rem;
    }

    &__UnsavedChanges,
    &__Controls {
      padding: $spacer / 2;
    }

    &__UnsavedChanges {
      font-size: .8rem;
      padding-left: 1.7 * $spacer;
      text-align: center;
    }

    &__Controls {
      display: flex;
      justify-content: center;

      * {
        margin-left: $spacer / 2;
      }
    }
  }
}
